layui.use('slider', function() {
    var $ = layui.$,
        slider = layui.slider;
    //默认滑块
    slider.render({
        elem: '#slideTest1'
    });

    //定义初始值
    slider.render({
        elem: '#slideTest2',
        value: 20 //初始值
    });

    //设置最大最小值
    slider.render({
        elem: '#slideTest3',
        min: 20 //最小值
            ,
        max: 50 //最大值
    });

    //设置步长
    slider.render({
        elem: '#slideTest4',
        step: 10 //步长
    });

    slider.render({
        elem: '#slideTest5',
        step: 10 //步长
            ,
        showstep: true //开启间隔点
    });

    //设置提示文本
    slider.render({
        elem: '#slideTest6',
        min: 20,
        max: 1000,
        setTips: function(value) { //自定义提示文本
            return value + 'GB';
        }
    });
    slider.render({
        elem: '#slideTest7',
        tips: false //关闭默认提示层
            ,
        change: function(value) {
            $('#test-slider-tips1').html('当前数值：' + value);
        }
    });

    //开启输入框
    slider.render({
        elem: '#slideTest8',
        input: true //输入框
    });

    //开启范围选择
    slider.render({
        elem: '#slideTest9',
        value: 40 //初始值
            ,
        range: true //范围选择
            ,
        change: function(vals) {
            $('#test-slider-tips2').html('开始值：' + vals[0] + '、结尾值：' + vals[1]);
        }
    });
    slider.render({
        elem: '#slideTest10',
        value: [30, 60] //初始值
            ,
        range: true //范围选择
    });

    //垂直滑块
    slider.render({
        elem: '#slideTest11',
        type: 'vertical' //垂直滑块
    });
    slider.render({
        elem: '#slideTest12',
        value: 30,
        type: 'vertical' //垂直滑块
    });
    slider.render({
        elem: '#slideTest13',
        value: 50,
        range: true //范围选择
            ,
        type: 'vertical' //垂直滑块
    });
    slider.render({
        elem: '#slideTest14',
        value: 80,
        input: true //输入框
            ,
        type: 'vertical' //垂直滑块
    });

    //自定义颜色
    slider.render({
        elem: '#slideTest15',
        theme: '#1E9FFF' //主题色
    });
    slider.render({
        elem: '#slideTest16',
        value: 50,
        theme: '#5FB878' //主题色
    });
    slider.render({
        elem: '#slideTest17',
        value: [30, 70],
        range: true,
        theme: '#FF5722' //主题色
    });

    //禁用滑块
    slider.render({
        elem: '#slideTest18',
        value: 35,
        disabled: true //禁用滑块
    });

});
